<template>
  <div>
    <div class="box">
      <img src="~@/assets/analysis.svg" />
      <a-descriptions title="系统信息" bordered>
        <a-descriptions-item key="IP" label="IP">
          {{ userInfo.IP }}
        </a-descriptions-item>
        <a-descriptions-item v-for="(value, key) in browserInfo" :key="key" :label="key">
          {{ value }}
        </a-descriptions-item>
        <a-descriptions-item label="网络状态">
          <a-badge :status="online ? 'processing' : 'default'" :text="online ? '在线' : '离线'" />
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { timeFix } from '@/utils/util'
import BrowserType from '@/utils/browser-type'

export default {
  name: 'dashboard-welcome',
  data() {
    return {
      welcome: timeFix(),
      online: false,
      browserInfo: BrowserType('zh-cn')
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    // 在页面加载后，设置正确的网络状态
    navigator.onLine ? this.showStatus(true) : this.showStatus(false)
  },
  mounted() {
    // 开始监听网络状态的变化
    window.addEventListener('online', this.showStatus)
    window.addEventListener('offline', this.showStatus)
  },
  beforeDestroy() {
    // 移除监听网络状态的变化
    window.removeEventListener('online', this.showStatus)
    window.removeEventListener('offline', this.showStatus)
  },
  methods: {
    showStatus(val) {
      this.online = typeof val == 'boolean' ? val : val.target.online
    }
  }
}
</script>

<style lang="less" scoped>
.header_avatar {
  display: flex;
  align-items: center;
  margin-top: 12px;

  .avatar {
    margin-right: 20px;
  }

  .welcome_desc {
    font-size: 20px;
    font-weight: 500;
  }
}

.card_content {
  .card_content_title {
    width: max-content;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    padding: 10px 100px 10px 0;
    border-bottom: 4px solid #000000;
  }

  .card_content_desc {
    margin: 10px 0 16px;
    font-size: 16px;
    color: #666666;
  }

  /deep/ .card_content_banner {
    .ant-carousel {
      height: 100%;

      .banner_item {
        height: 600px;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>

<style lang="less" scoped>
.box {
  width: 100%;
  height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;

  img {
    flex: 1;
    min-height: 0;
  }

  .ant-form {
    flex: 2;
  }
}
</style>
